/**
 *
 */
import React, { Component } from 'react'

import {
  Text,
  View,
} from 'react-native'

// import PropTypes from 'prop-types'
// import { StackActions } from '@react-navigation/native'

// import NavBarHome from '../../common/component/navigation/NavBarHome'

export default class Home extends Component {
  static navigationOptions(config, props) {
    // https://reactnavigation.org/docs/headers
    // https://reactnavigation.org/docs/stack-navigator/#headerleft
    const headerTitle = ({ scene, previous, navigation }) => {
      const { options } = scene.descriptor
      return (
        <View style={[{ backgroundColor: '#111', width: '100%', height: 400, overflow: 'hidden' }, options.headerStyle]}>
          <Text style={{ height: 400, backgroundColor: 'blue', textAlign: 'center', paddingTop: 60, color: 'white' }}>
            {'新首页 - 自定义 UI'}
          </Text>
        </View>
      )
    }
    config.header = headerTitle
    config.headerTransparent = true
    config.headerMode = 'float'
    return config
  }

  static propTypes = {
  }

  static defaultProps = {
  }

  constructor(props) {
    super(props)
  }

  render() {
    const { navigation } = this.props
    return (
      <View>
        <Text>home</Text>
        <Text
          style={{ backgroundColor: 'yellow', margin: 20, padding: 10, textAlign: 'center' }}
          onPress={() => {
            // 1
            // navigation.dispatch(
            //   StackActions.push('home-detail')
            //   // 2
            //   // StackActions.replace('Profile', {
            //   //   user: 'jane',
            //   // })
            // )

            // 3
            navigation.navigate('home-detail')
          }}
        >
          goto detail
        </Text>
      </View>
    )
  }
}